<template>
<!--  我的督办  -->
  <div>
      <div class="tabs-box">
          <el-tabs v-model="state.type" @tab-click="handleClick">
              <el-tab-pane label="督办的事项" name="1"></el-tab-pane>
              <el-tab-pane label="督办执行" name="2"></el-tab-pane>
          </el-tabs>
          <el-button
              class="button-ldjb m-r10"
              size="small"
               @click="openPopup"
          >
              <svg-icon icon-class="add-icon-1" class="m-r5"></svg-icon>
              领导交办
          </el-button>
      </div>
      <div class="search-wrap d-flex a-center flex-wrap">
          <div class="search-item d-flex a-center m-b10">
              <label>事项说明</label>
              <el-input clearable class="m-l5" v-model="form.keyword" placeholder="搜索事项说明"></el-input>
          </div>
          <div class="search-item d-flex a-center m-l5 m-b10">
              <label>状态</label>
              <el-select
                      clearable
                      v-model="form.status"
                      class="m-l5"
                      placeholder="选择状态"
              >
                  <el-option value="-1" label="未开始"></el-option>
                  <el-option value="0" label="进行中"></el-option>
                  <el-option value="1" label="已完成"></el-option>
                  <el-option value="2" label="已督办"></el-option>
                  <el-option value="3" label="督办驳回"></el-option>
              </el-select>
          </div>
          <div class="search-item d-flex a-center m-l5 m-b10">
              <label>选择计划时间</label>
              <el-date-picker
                      clearable
                      class="m-l5"
                      v-model="form.valueTime"
                      type="datetimerange"
                      size="large"
                      range-separator="-"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      @change="valueTimeChange"
              />
          </div>
          <div class="search-item d-flex a-center m-l5 m-b10">
              <label>执行人</label>
              <el-select
                  clearable
                  v-model="form.executeUserId"
                  class="m-l5"
                  placeholder="选择状态"
              >
                  <el-option v-for="(item,index) in state.userList" :key="index" :value="item.userId" :label="item.userName"></el-option>
              </el-select>
          </div>
          <div class="search-item d-flex a-center m-l5 m-b10">
              <label>事项类型</label>
              <el-select
                  clearable
                  v-model="form.superviseType"
                  class="m-l5"
                  placeholder="选择状态"
              >
                  <el-option value="1" label="领导督办"></el-option>
                  <el-option value="2" label="项目任务"></el-option>
                  <el-option value="3" label="周报计划"></el-option>
              </el-select>
          </div>
          <div class="search-buttons m-l50 m-b10">
              <el-button
                      color="#fc702b"
                      style="color:#fff;"
                      @click.prevent="onQuery"
              >查询</el-button>
              <el-button
                      color="#f0f0f0"
                      style="color: #000000"
                      @click.prevent="onReset"
              >重置</el-button>
          </div>
      </div>
      <el-main v-loading="isLoading" element-loading-text="loading..." >
          <public-table
              class="m-t20"
              index
              :page="page"
              height="550"
              :tableData="tableData"
              :tableOption="tableOption"
              @page-change="onPageChange"
          >
              <template #createName="scope">
                  <span>{{scope.row.createTime}}({{scope.row.createName}})</span>
              </template>
              <template #update="scope">
                  <el-button size="small" @click="toPath(scope.row)">查看</el-button>
                    <!--  未开始、进行中   且为督办执行 才显示                -->
                  <el-button size="small" @click="onUpdateRate(scope.row)" v-if="(state.type==='2' && scope.row.status === -1) || state.type==='2' && scope.row.status === 0">更新进度</el-button>
              </template>
          </public-table>
      </el-main>
  </div>

  <assigned-by-leaders-popup :user-list="state.userList" ref="assignedByLeadersPopupRef" @onSuccess="onQuery"/>
    <update-rate
        ref="updateRateRef"
        @onSuccess="onQuery"
    />
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {department, superviseAndHandle} from "@/api/project";
import PublicTable from "@/components/PublicTable";
import {ElTabs, ElTabPane, ElDatePicker, ElMain} from "element-plus";
import {localGet, resetForm} from "@/common/utils/GlobalUtils";
import SvgIcon from "@/components/SvgIcon/index.vue";
import AssignedByLeadersPopup from "./components/assignedByLeadersPopup.vue"
import {useRouter} from "vue-router";
import UpdateRate from "@/views/supervisionMatters/mySupervisionMatters/components/updateRate.vue";

const state = reactive({
    type:'1',
    userList:[]
});

const isLoading = ref(false);

const form = reactive({
    keyword:'',
    status:'',
    valueTime:'',
    startTime:'',
    endTime:'',
    executeUserId:'', // 执行人
    superviseType:'', // 事项类型
});

const page = reactive({
    total: 0,
    current: 1,
    size: 50
});

const tableData = ref([]);

const tableOption = ref([
    { label: "ID", prop: "superviseId" },
    { label: "督办事项", prop: "superviseContent" },
    { label: "执行人 ", prop: "executeUserName" },
    { label: "督办人 ", prop: "superviseUserName" },
    { label: "计划完成时间 ", prop: "planEndTime" },
    { label: "状态", prop: "status",formatter:(val)=>{
           return {'-1':'未开始','0':'进行中','1':'已完成','2':'已督办','3':'督办驳回'}[val]
    } },
    { label: "督办来源 ", prop: "superviseType",formatter:(val)=>{
            return {'1':'领导督办','2':'项目任务','3':'周报计划'}[val]
    } },
    { label: "督办时间/创建人", prop: "createName",slot:true },
    { label: "操作", prop: "update",slot:true },
]);

/**
 * 我的督办/我的执行
 * @param params
 * @param callback
 */
const mySupervisorAndMyExecution = (params,callback) => {
    superviseAndHandle.mySupervisorAndMyExecution(params).then(res=>{
        if(res.code==='200'){
            tableData.value = res.data.content;
            page.total = res.data.totalSize;
        }
        if(callback)callback();
    });
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    mySupervisorAndMyExecution(param);
}

/**
 * tab被点击
 * @param e
 */
const handleClick = (e) => {
    state.type = (parseInt(e.index)+ 1).toString();
    page.current = 1;
    page.size = 50;
    resetForm(form);
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    isLoading.value = true;
    mySupervisorAndMyExecution(param,()=>{isLoading.value = false;});
}

/**
 * 条件查询
 */
const onQuery = () => {
    page.current = 1;
    page.size = 50;
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    isLoading.value = true;
    mySupervisorAndMyExecution(param,()=>{isLoading.value = false;});
}

/**
 * 重置
 */
const onReset = () => {
    page.current = 1;
    page.size = 50;
    resetForm(form);
    let param = {
        param: {
            ...form,
            type:state.type
        },
        pageNum: page.current,
        pageSize: page.size
    };
    isLoading.value = true;
    mySupervisorAndMyExecution(param,()=>{isLoading.value = false;});
}

/**
 * 时间选择
 * @param e
 */
const valueTimeChange = (e) => {
    form.startDate = '';
    form.endDate = '';
    if (e) {
        form.startDate = e[0];
        form.endDate = e[1];
    }
}

/**
 * 根据部门查人
 * @param departmentId
 */
const getUserByDepartmentId = (departmentId) => {
    department.getUserByDepartmentId(departmentId).then(res=>{
        if(res.code==='200'){
            state.userList = res.data;
        }
    })
}

const assignedByLeadersPopupRef = ref(null);

/**
 * 打开弹窗
 */
const openPopup = () => {
    assignedByLeadersPopupRef.value.openPopup();
}

const router = useRouter();

/**
 * 跳转详情
 * @param row
 */
const toPath = (row) => {
    router.push({path:`/supervisionMatters/mySupervisionMatters/supervisionDetails/superviseId=${row.superviseId}&isLook=0`});
}

const updateRateRef = ref(null);
/**
 * 更新进度
 * @param row
 */
const onUpdateRate = (row) => {
    updateRateRef.value.openPopup(row.superviseId);
}

onMounted(()=>{
    mySupervisorAndMyExecution({
        pageNum:1,
        pageSize:50,
        param:{
            type:state.type
        }
    });

    getUserByDepartmentId(localGet('DepartmentId'));
});
</script>

<style lang="scss" scoped>
.tabs-box{
     position: relative;
    .button-ldjb{
        position: absolute;
        top:-5px;
        right: 0;
    }
}

.search-wrap{
    .search-item{
        .el-input{
            width: auto !important;
        }
    }
    .search-buttons{
        .icon-export{
            width: 18px;
            height: 18px;
        }
    }
}
</style>
